<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌单</title>
    <link rel="stylesheet" href="./css/2.0.css">
    <link rel="stylesheet" href="./images/font2/iconfont.css">
    <style>
     
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="hearder">

        <div class="container">
            <nav class="nav1">
                <div class="logo">
                    <img src="images/logo.png" alt="">
                </div>
                <ul class="ulx clearfix">
                    <li>首页</li>
                    <li class="con">歌单</li>
                    <li>歌手</li>
                    <li>VIP</li>
                    <li>音乐盒</li>
                    <li>客户端</li>
                </ul>
                <div class="nav-rigth">
                    <div>
                        <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
                        <span class="iconfont icon-fangdajing"></span>
                    </div>
                    <span>登录/注册</span>
                </div>
            </nav>
        </div>
    </header>
     <!-- 语种导航 -->
    <div class="container">
        <div class="ge-lits">
            <div class="lits1">
                <h3><span class="iconfont icon-liaotianduihua"></span> 语种</h3>
                <ul>
                    <li>华语</li>
                    <li>欧美</li>
                    <li>粤语</li>
                    <li>日语</li>
                    <li>韩语</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="lits2">
                <h3><span class="iconfont icon-guangdie"></span> 流派</h3>
                <ul>
                    <li>流行</li>
                    <li>摇滚</li>
                    <li>民谣</li>
                    <li>电子</li>
                    <li>影视原声</li>
                    <li>ACG</li>
                    <li>新世纪</li>
                    <li>爵士</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="lits3">
                <h3> <span class="iconfont icon-guangdie"></span>主题</h3>
                <ul>
                    <li>经典</li>
                    <li>翻唱</li>
                    <li>现场</li>
                    <li>KTV</li>
                    <li>网络歌曲</li>
                    <li>乐器</li>
                    <li>节日</li>
                    <li>人群</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="lits4">
                <h3> <span class="iconfont icon-aixin2"></span>情感</h3>
                <ul>
                    <li>快乐</li>
                    <li>美好</li>
                    <li>安静</li>
                    <li>寂寞</li>
                    <li>思念</li>
                    <li>孤独</li>
                    <li>怀旧</li>
                    <li>悲伤</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="lits5">
                <h3> <span class="iconfont icon-yusan"></span>场景</h3>
                <ul>
                    <li>运动</li>
                    <li>驾驶</li>
                    <li>学习</li>
                    <li>工作</li>
                    <li>清晨</li>
                    <li>夜晚</li>
                    <li>午后</li>
                    <li>游戏</li>
                    <li>更多</li>
                </ul>
            </div>
        </div>
    </div>
      <!-- 中部导航 -->
    <div class="container">
        <div class="man-gnav">
            <h2>热门歌单</h2>
        </div>
    </div>
    <!-- 中部歌单 -->
    <div class="container">
        <div class="gedan">
            <ul>
                <li>
                    <div class="img">
                        <img src="./images/gd01.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>温柔男声 | 耳边的缠绵缱绻</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd02.jpg" alt="">
                        <span></span>

                    </div>
                    <h5>【重阳节】陪伴家人，登高远眺</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd03.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>秋分 | 自此，昼短夜长，天地泛黄</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd04.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【国庆节】假期听歌攻略</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd05.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>国剧崛起，那些好剧里的好歌</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd06.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>温柔男声 | 耳边的缠绵缱绻</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd06.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【重阳节】陪伴家人，登高远眺</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd08.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>秋分 | 自此，昼短夜长，天地泛黄</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd09.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【国庆节】假期听歌攻略</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd10.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>国剧崛起，那些好剧里的好歌</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd11.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>温柔男声 | 耳边的缠绵缱绻</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd12.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【重阳节】陪伴家人，登高远眺</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd13.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>秋分 | 自此，昼短夜长，天地泛黄</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd14.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【国庆节】假期听歌攻略</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd15.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>国剧崛起，那些好剧里的好歌</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd16.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>温柔男声 | 耳边的缠绵缱绻</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd17.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【重阳节】陪伴家人，登高远眺</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd18.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>秋分 | 自此，昼短夜长，天地泛黄</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd19.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【国庆节】假期听歌攻略</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd20.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>国剧崛起，那些好剧里的好歌</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd21.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>温柔男声 | 耳边的缠绵缱绻</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd22.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【重阳节】陪伴家人，登高远眺</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd23.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>秋分 | 自此，昼短夜长，天地泛黄</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd24.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【国庆节】假期听歌攻略</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd25.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>国剧崛起，那些好剧里的好歌</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd26.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>温柔男声 | 耳边的缠绵缱绻</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd27.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【重阳节】陪伴家人，登高远眺</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd28.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>秋分 | 自此，昼短夜长，天地泛黄</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd29.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【国庆节】假期听歌攻略</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd30.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>国剧崛起，那些好剧里的好歌</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd31.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>温柔男声 | 耳边的缠绵缱绻</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd32.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【重阳节】陪伴家人，登高远眺</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd33.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>秋分 | 自此，昼短夜长，天地泛黄</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd34.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【国庆节】假期听歌攻略</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd35.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>国剧崛起，那些好剧里的好歌</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd36.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>温柔男声 | 耳边的缠绵缱绻</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd37.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【重阳节】陪伴家人，登高远眺</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd38.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>秋分 | 自此，昼短夜长，天地泛黄</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd38.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>【国庆节】假期听歌攻略</h5>
                </li>
                <li>
                    <div class="img">
                        <img src="./images/gd40.jpg" alt="">
                        <span></span>
                    </div>
                    <h5>国剧崛起，那些好剧里的好歌</h5>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页数条 -->
    <div class="container">
        <ul class="lis clearfix">
            <li><</li>
            <li class="zc">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>... <div>>></div></li>
            <li>45</li>
            <li>></li>
        </ul>
    </div>
    <!-- 推荐直播 -->
    <div class="zhibo">
        <div class="container">
            <div class="zbo">
                <div class="man-gna">
                    <h2>相关直播推荐</h2>
                    <span>你已经被我一个人包围</span>
                </div>
                <div class="b-shi">
                    <ul >
                        <li>
                           <p><span>&#8226;</span>直播中</span> </p>
                            <img src="./images/gd24.jpg" alt="">
                        </li>
                        <li>
                            <p><span>&#8226;</span> 直播中</p>
                            <img src="./images/gd25.jpg" alt="">
                        </li>
                        <li>
                            <p><span>&#8226;</span> 直播中</p>
                            <img src="./images/gd04.jpg" alt="">
                        </li>
                        <li>
                            <p><span>&#8226;</span> 直播中</p>
                            <img src="./images/gd19.jpg" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 脚 -->
    <footer>
        <div class="container">
            <div class="fot">
                <div class="fot-left">
                    <h4>下载千千客户端</h4>
                    <ul>
                        <li>
                            <span class="iconfont icon-anzhuoandroid"></span>
                            <span >Android版</span>
                            <div class="re">
                                <img src="./images/ad01.jpg" alt="">
                                <p>微信扫一扫</p>
                            </div>
                        </li>
                        <li>
                            <span class="iconfont icon-pingguoios
                            "></span>
                            <span>iphone版</span>
                            <div class="re">
                                <img src="./images/ad01.jpg" alt="">
                                <p>微信扫一扫</p>
                            </div>
                        </li>
                        <li>   
                            <span class="iconfont icon-windows-fill
                            "></span>
                            <span>Window版</span>
                        </li>
                        <li>
                            <span class="iconfont icon-line-Macpingguotaishiji"></span>
                            <span>MAC版</span>
                        </li>
                    </ul>
                </div>
                <div class="fot-zo">
                    <h4>关于千千</h4>
                    <ul>
                        <li>意见反馈</li>
                        <li>联系我们</li>
                        <li>DMH数字音乐发布平台</li>
                    </ul>
                </div>
                <div class="fot-right">
                    <h4>关注千千音乐</h4>
                    <ul>
                        <li>
                            <span class="iconfont icon-weibo"></span>
                            <span>关注微博</span>
                            <div class="re">

                            </li>
                        <li>
                            <span class="iconfont icon-weixin"></span>
                            <span>微信公众号</span>
                            <div class="re">
                                <img src="./images/ad01.jpg" alt="">
                                <p>微信扫一扫</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="foot-t">
            <div class="container">
                <div class="ft-d">
                    <p>
                        Copyright 2018 © .TAIHE MUSIC GROUP. 深圳太乐文化科技有限公司版权所有 [粤ICP备17102508号-2]
                    </p>  
                    <p>
                       信息网络传播视听许可证: 1910523  | <span></span> 粤公网安备: 44030502002309号 | 增值电信业务经营许可证: 粵B2-20180819 | 网络文化经营许可证号码: 粤网文[2018]0902-359号 
                    </p>
                    <p>
                        举报邮箱: jubao@taihe.com | 反馈中心
                    </p>
                </div>
            </div>
        </div>
    </footer>
    
    
</body>
</html>